<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./jsoneditor.min.css" />
    <script src="./jsoneditor.min.js"></script>
</head>

<body>
    <input id="uid">
    <button id="getLog">get</button>
    <div id="log" style="overflow: scroll;border: solid;height: 80vh;white-space: pre;"></div>
    <div id="buttons"></div>
    <div id="log" style="overflow: scroll;border: solid;height: 80vh;white-space: pre;"></div>
    <script>
        const editor = new JSONEditor(container, options)
        function getLog(uid) {
            uid = uid ?? document.getElementById("uid").value
            let xhr = new XMLHttpRequest();
            xhr.open("GET", `${location.origin}/log/${uid}`)
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        let log = JSON.parse(xhr.response).data.replace(/\n/g, "<br>")
                        let div = document.getElementById("log")
                        div.innerHTML = log
                        div.scrollTop = div.scrollHeight
                    }
                }
            }
            xhr.send()
        }
        document.getElementById("getLog").addEventListener("click", function (e) {
            getLog()
        })
        function list() {
            let xhr = new XMLHttpRequest();
            xhr.open("GET", `${location.origin}/list`)
            xhr.onreadystatechange = (e) => {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        let div = document.getElementById("buttons")
                        div.innerHTML = ""
                        let items = JSON.parse(xhr.response).data
                        for (const item of items) {
                            let b = document.createElement("button")
                            b.innerText = item
                            b.addEventListener("click", (e) => {
                                getLog(b.innerText)
                            })
                            div.append(b)
                        }
                    }
                }
            }
            xhr.send()
        }
        list()

    </script>
</body>

</html>